<template>
	<div class="login-vue">
		<div class="login-box">
			<div class="login-title">vue3-admin-template</div>

			<!-- 登录表单 -->
			<el-form class="login-form" :model="loginForm">
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" placeholder="账号">
						<template #prefix>
							<el-icon size="20" class="el-input__icon"><user /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" placeholder="密码">
						<template #prefix>
							<el-icon size="20" class="el-input__icon"><lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				<!-- <el-form-item prop="code" class="imageBox">
					<el-input v-model="loginForm.code" placeholder="验证码">
						<template #prefix>
							<el-icon size="20" class="el-input__icon"><lock /></el-icon>
						</template>
					</el-input>
					<div class="image" @click="getImageCode">
						<img :src="image" width="110" height="32" alt="" />
					</div>
				</el-form-item> -->
			</el-form>

			<div class="submitBtn">
				<el-button type="primary" @click="handleLogin" style="width: 100%; background-color: #409eff; border-color: #2f9688">登 录</el-button>
			</div>
		</div>
	</div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { useMainStore } from '@/store/user.js'
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { login, imageCode } from "@/api/login";
import { generateUUID } from "@/utils/index";
const mainStore = useMainStore();
const router = useRouter();
const loginForm = reactive({
	username: "admin",
	password: "123456",
	uuid: "",
	code: ""
});
const image = ref(null);
// 获取图形验证码
async function getImageCode() {
	loginForm.uuid = generateUUID();
	const res = await imageCode({ uuid: loginForm.uuid });
	// 将返回的图片数据转换为base64格式
	image.value = "data:image/jpg;base64," + res.data.img;
}

function handleLogin() {
	// const res = await login(loginForm);
	// const token = res.data.token;
	const token = 'Token123';
	mainStore.token = token;
	// mainStore.name = 'weibo';
	ElMessage.success("登录成功");
	router.push("/index").catch(() => {});
}

// getImageCode();
</script>

<style lang="scss" scoped>
.login-vue {
	width: 100%;
	height: 100%;
	background-color: #393d49;
}
.login-box {
	width: 450px;
	height: 350px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.login-title {
		text-align: center;
		font-size: 26px;
		color: #fff;
		margin-bottom: 25px;
	}
	.login-form {
		margin: 30px 0;
	}
}
</style>

<style lang="scss">
.login-vue {
	.el-form-item__label {
		color: #fff;
	}
	.el-input--prefix .el-input__inner {
		padding-left: 36px;
	}
	.el-input__inner {
		color: #fff;
		background-color: #323540;
		// background-color: #2f9688;
		border-color: #4c4c4e;
	}
	.imageBox .el-form-item__content {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		.image {
			height: 32px;
			padding-left: 15px;
			padding-top: 2px;
			cursor: pointer;
		}
	}
}
</style>